--rotate{
    initial-value: 132deg;
}
:root{
    --card-height: 65vh;
    --card-width: calc(var(--card-height)/1.5);
}

body{
    min-height: 100vh;
    background: #212534;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: cursive;
}
.card{
    background: #191c29;
    width: var(--card-width);
    height: var(--card-height);
    padding: 3px;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 1.5em;
    color: rgb(88 199 250 / 0%);
    cursor: pointer;
}
.card:hover{
    color:rgb(88 199 250 / 100%);
  transition: color 1s;
}
.card::before{
content: "";
width: 104%;
height: 102%;
border-radius: 8px;
background-image: linear-gradient(132deg,#5ddcff
#3c67e3 43%, #4e00c2);
 position: absolute;
z-index: -1;
left: -2%;
top: -1;
animation: spin 2.5s linear infinite; 

} 
.card::after{
    position: absolute;
    content: "";
    background-image: linear-gradient(132deg,#5ddcff
    #3c67e3 43%, #4e00c2);
    height: 100%;
    width: 100%;
    top: clac(var(--card-height)/6);
    left: 0;
    right: 0;
    z-index: -1;
    margin: 0 auto;
    transform: scale(0.8);
    filter: blur(calc(var(--card-height)));
}